#{extends 'master.html' /}
#{set 'moreStyles'}
<style type="text/css">
    input.play, input.refresh, input.stop {
        background-color: white;
        background-repeat: no-repeat;
        margin: 0;
        padding: 0;
        width: 32px;
        height: 32px;
        background-image: url(@{'/public/images/controlbar.png'});
    }

    input.play {

    }

    input.refresh {
        background-position: -33px;
    }

    input.stop {
        background-position: -65px;
    }

    .crawlerLogo {
        border: 1px solid #635936;
    }

    .crawlersList {
        list-style: none;
    }

    .crawlerControl {
        margin-bottom: 15px;
        text-align: center;
    }

    .crawlersList li {
        display: inline;
    }

    .crawlersList div {
        float: left;
        width: 130px;
    }
</style>
#{/set}
<div class="stacked-box">
    <ul>

    #{list items:crawlers, as:'crawler'}
        <li class="crawlersList">
            <div>
                <a href="@{Crawler.getStatus(crawler.title)}"><img class="crawlerLogo" src="@{Crawler.getImage(crawler.imageName)}"/></a>
                <div class="crawlerControl">
                    <form action="@{Crawler.startNewScan(crawler.title)}" method="POST">

                        <input type="submit" class="play" value="" title="&{'Crawler.list.start'}"/>
                    </form>
                    <form action="@{Crawler.refresh(crawler.title)}" method="POST">
                        <input type="submit" class="refresh" value="" title="&{'Crawler.list.start'}"/>
                    </form>
                </div>
            </div>
        </li>
    #{/list}
    </ul>
</div>